<template>
  <div class="com-product-item" @click="toDetail">
    <div class="product-item">
      <div style="position: relative">
        <img
          :src="productInfo.productImg.split(',')[0] | formatFile"
          class="cover"
          alt=""
        />
        <div class="tag flex-xy-center" :style="{ background: `url(${currentTag.bg})` }">
          <img :src="currentTag.icon" class="tag-icon" alt="" />
          <span>{{ currentTag.name }}</span>
        </div>
      </div>
      <div class="bottom-info">
        <div class="name">{{ productInfo.productTitle }}</div>
        <div class="desc">
          <span>{{ productInfo.createTime.split(" ")[0] }} ｜ </span>
          <span>{{ productInfo.province }} {{ productInfo.city }}</span>
        </div>
        <div class="price">
          <div class="">
            <span class="price">{{ productInfo.showPrice }}</span>
            <span
              style="color: #333; font-size: 28rpx; font-weight: normal"
              v-if="productInfo.putType == 3"
              >/月</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductItem",
  props: {
    productInfo: {
      default: {},
    },
  },
  data() {
    return {
      tags: [
        {
          type: 1,
          name: "厂家",
          icon: require("@/assets/img/icon-type-1.png"),
          bg: require("@/assets/img/icon-type-1-bg.png"),
        },
        {
          type: 2,
          name: "二手",
          icon: require("@/assets/img/icon-type-2.png"),
          bg: require("@/assets/img/icon-type-2-bg.png"),
        },
        {
          type: 3,
          name: "租赁",
          icon: require("@/assets/img/icon-type-3.png"),
          bg: require("@/assets/img/icon-type-3-bg.png"),
        },
      ],
    };
  },
  computed: {
    currentTag() {
      return this.tags.find((item) => item.type == this.productInfo.putType);
    },
  },
  methods: {
    toDetail() {
      this.$router.push("/productDetail/" + this.$route.name);
    },
  },
};
</script>

<style lang="scss" scoped>
.com-product-item {
  margin-right: 13px;
  width: 229px;
  cursor: pointer;
}

.product-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .cover {
    width: 100%;
    height: 229.6px;
  }

  .tag {
    position: absolute;
    top: 10px;
    left: -2px;
    width: 60px;
    height: 28px;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;

    .tag-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }

  .bottom-info {
    background: #fff;
    padding: 15px 15px 0 15px;

    .name {
      font-weight: 400;
      font-size: 18px;
      color: #333333;
    }

    .desc {
      font-weight: 400;
      font-size: 16px;
      color: #808080;
      margin: 12px 0;
    }

    .price {
      font-weight: bold;
      font-size: 18px;
      color: #f42d1f;
      padding-bottom: 16px;
    }
  }
}
</style>
